<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>武钢有限班组排班查询系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a4c 0%, #2c3e50 100%);
            color: #fff;
            line-height: 1.6;
            padding: 15px;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            width: 100%;
            max-width: 95%;
            background: rgba(30, 40, 60, 0.95);
            border-radius: 20px;
            padding: 25px;
            margin: 15px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        }
        
        header {
            text-align: center;
            padding: 20px 0;
            margin-bottom: 20px;
            position: relative;
        }
        
        h1 {
            font-size: 2.2rem;
            position: relative;
            margin-bottom: 8px;
            color: #fff;
            line-height: 1.3;
            text-shadow: 0 2px 4px rgba(0,0,0,0.6);
            letter-spacing: 1px;
        }
        
        .subtitle {
            font-size: 1.15rem;
            color: #bdc3c7;
            margin-bottom: 10px;
        }
        
        .date-control {
            background: rgba(255, 255, 255, 0.12);
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 25px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .date-group {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        label {
            font-weight: 600;
            color: #ecf0f1;
            min-width: 90px;
            font-size: 1.15rem;
            flex-shrink: 0;
        }
        
        input[type="date"] {
            padding: 14px 18px;
            border: 2px solid #3498db;
            border-radius: 12px;
            font-size: 1.15rem;
            flex: 1;
            background: rgba(0, 0, 0, 0.25);
            color: #fff;
            transition: all 0.3s ease;
            min-width: 0;
        }
        
        input[type="date"]:focus {
            border-color: #e74c3c;
            outline: none;
            box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.3);
        }
        
        .current-date {
            text-align: center;
            font-size: 1.7rem;
            font-weight: 700;
            color: #f1c40f;
            margin: 25px 0;
            padding: 16px;
            background: rgba(0, 0, 0, 0.25);
            border-radius: 15px;
            border: 1px solid rgba(241, 196, 15, 0.4);
            line-height: 1.4;
            text-shadow: 0 2px 3px rgba(0,0,0,0.4);
        }
        
        .shift-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .shift-card {
            background: rgba(255, 255, 255, 0.12);
            border-radius: 15px;
            padding: 22px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            min-width: 0;
        }
        
        .shift-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.18);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        
        .shift-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
        }
        
        .shift-card.team-a::before { background: linear-gradient(90deg, #3498db, #1a5276); }
        .shift-card.team-b::before { background: linear-gradient(90deg, #2ecc71, #27ae60); }
        .shift-card.team-c::before { background: linear-gradient(90deg, #9b59b6, #8e44ad); }
        .shift-card.team-d::before { background: linear-gradient(90deg, #e67e22, #d35400); }
        
        .team-name {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 10px;
            text-align: center;
            text-shadow: 0 2px 3px rgba(0,0,0,0.4);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .shift-type {
            font-size: 1.9rem;
            font-weight: 800;
            text-align: center;
            padding: 15px 0;
            border-radius: 12px;
            margin: 15px 0;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: 0 2px 3px rgba(0,0,0,0.4);
        }
        
        .shift-type::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.25);
            z-index: -1;
        }
        
        .day-shift { 
            color: #3498db;
            background: rgba(52, 152, 219, 0.2);
        }
        .night-shift { 
            color: #f1c40f;
            background: rgba(241, 196, 15, 0.2);
        }
        .late-night-shift { 
            color: #e74c3c;
            background: rgba(231, 76, 60, 0.2);
        }
        .day-off { 
            color: #2ecc71;
            background: rgba(46, 204, 113, 0.2);
        }
        
        .shift-info {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            font-size: 1.05rem;
            color: #bdc3c7;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .shift-time {
            background: rgba(0, 0, 0, 0.3);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 1rem;
            white-space: nowrap;
        }
        
        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            justify-content: center;
            margin: 25px 0;
            padding: 18px;
            background: rgba(0, 0, 0, 0.25);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            font-size: 1.1rem;
        }
        
        .legend-color {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        footer {
            text-align: center;
            padding: 20px 0 10px;
            color: #7f8c8d;
            font-size: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            margin-top: 15px;
        }
        
        .cycle-info {
            background: rgba(44, 62, 80, 0.6);
            padding: 14px;
            border-radius: 12px;
            margin: 20px 0;
            text-align: center;
            font-size: 1.1rem;
            line-height: 1.6;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }
        
        .highlight {
            animation: highlight 1.5s ease-in-out;
        }
        
        @keyframes highlight {
            0% { transform: scale(1); box-shadow: 0 0 0 rgba(231, 76, 60, 0); }
            50% { transform: scale(1.03); box-shadow: 0 0 20px rgba(231, 76, 60, 0.4); }
            100% { transform: scale(1); box-shadow: 0 0 0 rgba(231, 76, 60, 0); }
        }
        
        /* 超小屏幕优化 */
        @media (max-width: 480px) {
            .container {
                padding: 20px 18px;
                margin: 10px;
                border-radius: 18px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .subtitle {
                font-size: 1.05rem;
            }
            
            .date-control {
                padding: 18px;
            }
            
            label {
                font-size: 1.05rem;
                min-width: 80px;
            }
            
            input[type="date"] {
                padding: 13px 16px;
                font-size: 1.05rem;
            }
            
            .current-date {
                font-size: 1.5rem;
                padding: 14px;
            }
            
            .shift-card {
                padding: 18px;
            }
            
            .team-name {
                font-size: 1.6rem;
            }
            
            .shift-type {
                font-size: 1.7rem;
                padding: 12px 0;
            }
            
            .shift-info {
                font-size: 0.98rem;
            }
            
            .shift-time {
                font-size: 0.95rem;
            }
            
            .cycle-info {
                font-size: 1.02rem;
                padding: 12px;
            }
        }
        
        @media (max-width: 380px) {
            .shift-container {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 1.65rem;
            }
            
            .current-date {
                font-size: 1.4rem;
            }
        }
        
        /* 电脑浏览器优化 */
        @media (min-width: 768px) {
            .container {
                padding: 35px;
                margin: 30px auto;
                max-width: 700px;
            }
            
            h1 {
                font-size: 2.3rem;
            }
            
            .subtitle {
                font-size: 1.2rem;
            }
            
            .shift-card {
                padding: 25px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>武钢有限班组排班查询</h1>
            <div class="subtitle">四班轮值 · 精准排班 · 高效管理</div>
        </header>
        
        <div class="date-control">
            <div class="date-group">
                <label for="query-date">查询日期：</label>
                <input type="date" id="query-date">
            </div>
        </div>
        
        <div class="current-date">
            <span id="display-date">正在加载日期...</span>
        </div>
        
        <div class="shift-container">
            <div class="shift-card team-a">
                <div class="team-name">甲班</div>
                <div class="shift-type day-shift">--</div>
                <div class="shift-info">
                    <span>工作时间</span>
                    <span class="shift-time" id="team-a-time">--:--</span>
                </div>
            </div>
            
            <div class="shift-card team-b">
                <div class="team-name">乙班</div>
                <div class="shift-type night-shift">--</div>
                <div class="shift-info">
                    <span>工作时间</span>
                    <span class="shift-time" id="team-b-time">--:--</span>
                </div>
            </div>
            
            <div class="shift-card team-c">
                <div class="team-name">丙班</div>
                <div class="shift-type late-night-shift">--</div>
                <div class="shift-info">
                    <span>工作时间</span>
                    <span class="shift-time" id="team-c-time">--:--</span>
                </div>
            </div>
            
            <div class="shift-card team-d">
                <div class="team-name">丁班</div>
                <div class="shift-type day-off">--</div>
                <div class="shift-info">
                    <span>休息时间</span>
                    <span class="shift-time" id="team-d-time">--:--</span>
                </div>
            </div>
        </div>
        
        <div class="cycle-info">
            班次循环：白班 → 夜班 → 下夜班 → 正休（四天一个循环）
        </div>
        
        <div class="legend">
            <div class="legend-item">
                <div class="legend-color" style="background-color: #3498db;"></div>
                <span>白班</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #f1c40f;"></div>
                <span>夜班</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #e74c3c;"></div>
                <span>下夜班</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #2ecc71;"></div>
                <span>正休</span>
            </div>
        </div>
        
        <footer>
            <p>武钢有限 © 2025 | 班组轮值系统 V3.0 </br>by: GShine</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const queryDate = document.getElementById('query-date');
            const displayDate = document.getElementById('display-date');
            const shiftCards = document.querySelectorAll('.shift-card');
            
            // 班次数据模型
            const shiftPattern = [
                // 模式0
                { 
                    shifts: [
                        { team: "甲", shift: "白班" },
                        { team: "乙", shift: "夜班" },
                        { team: "丙", shift: "下夜班" },
                        { team: "丁", shift: "正休" }
                    ]
                },
                // 模式1
                { 
                    shifts: [
                        { team: "甲", shift: "夜班" },
                        { team: "乙", shift: "下夜班" },
                        { team: "丙", shift: "正休" },
                        { team: "丁", shift: "白班" }
                    ]
                },
                // 模式2
                { 
                    shifts: [
                        { team: "甲", shift: "下夜班" },
                        { team: "乙", shift: "正休" },
                        { team: "丙", shift: "白班" },
                        { team: "丁", shift: "夜班" }
                    ]
                },
                // 模式3
                { 
                    shifts: [
                        { team: "甲", shift: "正休" },
                        { team: "乙", shift: "白班" },
                        { team: "丙", shift: "夜班" },
                        { team: "丁", shift: "下夜班" }
                    ]
                }
            ];
            
            // 获取当前日期并格式化为YYYY-MM-DD
            function getCurrentDate() {
                const now = new Date();
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const day = String(now.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            }
            
            // 日期格式化显示
            function formatDisplayDate(dateStr) {
                const date = new Date(dateStr);
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                return `${year}年${month}月${day}日`;
            }
            
            // 计算日期差（相对于2025-06-01）
            function calculatePatternIndex(dateStr) {
                const baseDate = new Date("2025-06-01");
                const targetDate = new Date(dateStr);
                
                // 计算天数差
                const diffTime = targetDate - baseDate;
                const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
                
                // 计算模式索引（4天一个循环）
                return (diffDays % 4 + 4) % 4;
            }
            
            // 更新班次显示
            function updateShifts(selectedDate) {
                // 计算模式索引
                const patternIndex = calculatePatternIndex(selectedDate);
                const shiftData = shiftPattern[patternIndex];
                
                // 更新班次显示
                shiftCards.forEach(card => {
                    const teamName = card.querySelector('.team-name').textContent.replace('班', '');
                    const shiftType = card.querySelector('.shift-type');
                    const timeElement = card.querySelector('.shift-time');
                    
                    const shift = shiftData.shifts.find(s => s.team === teamName);
                    
                    if (shift) {
                        // 移除所有班次类
                        shiftType.classList.remove('day-shift', 'night-shift', 'late-night-shift', 'day-off');
                        
                        // 添加对应的班次类
                        if (shift.shift === '白班') {
                            shiftType.textContent = '白班';
                            shiftType.classList.add('day-shift');
                            timeElement.textContent = '08:00-20:00';
                        } else if (shift.shift === '夜班') {
                            shiftType.textContent = '夜班';
                            shiftType.classList.add('night-shift');
                            timeElement.textContent = '20:00-08:00';
                        } else if (shift.shift === '下夜班') {
                            shiftType.textContent = '下夜班';
                            shiftType.classList.add('late-night-shift');
                            timeElement.textContent = '20:00-08:00';
                        } else if (shift.shift === '正休') {
                            shiftType.textContent = '正休';
                            shiftType.classList.add('day-off');
                            timeElement.textContent = '全天';
                        }
                        
                        // 添加高亮动画
                        card.classList.add('highlight');
                        setTimeout(() => {
                            card.classList.remove('highlight');
                        }, 1500);
                    }
                });
                
                // 更新显示日期
                displayDate.textContent = formatDisplayDate(selectedDate);
            }
            
            // 初始化页面
            function initPage() {
                // 获取当前日期
                const currentDate = getCurrentDate();
                
                // 设置日期选择器的值为当前日期
                queryDate.value = currentDate;
                
                // 更新班次显示
                updateShifts(currentDate);
            }
            
            // 页面加载完成后初始化
            initPage();
            
            // 日期选择事件监听
            queryDate.addEventListener('change', function() {
                updateShifts(this.value);
            });
        });
    </script>
</body>
</html>